<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="fxActivityRecord-details">
    <div class="page fxActivityRecord-details">
      <div class="scroll-view">
        <customHeader middleTitle="交易详情" @leftCallBack="popupHide"></customHeader>
        <div class="page-body">
          <ul class="details-list">
            <li>
              <ul class="top">
                <li>
                  <span>{{orderTypeFormate(data.orderType)}}</span>
                  <div>{{data.amount}}</div>
                </li>
                <li v-if="data.orderType == 3">
                  <span>结算类型</span>
                  <div>
                    {{data.settlementTypeFormate}}
                    <div>{{data.settlementType===0?"预计结算时间：":"结算时间："}}{{data.settlementTimeFormate}}</div>
                  </div>
                </li>
              </ul>
              <ul class="bottom">
                <li>
                  <span>
                    <b>关联交易</b>
                  </span>
                  <div></div>
                </li>
                <li>
                  <span>原交易金额</span>
                  <div>{{orderData.supplierReceiveAmount}}</div>
                </li>
                <li v-if="data.orderType == 7">
                  <span>津贴抵扣金额</span>
                  <div>{{orderData.tradeOrderExtModel?orderData.tradeOrderExtModel['encourageDeductionAmount']:""}}</div>
                </li>
                <li>
                  <span>交易类型</span>
                  <div>{{data.recordTypeFormate}}</div>
                </li>
                <li>
                  <span>交易时间</span>
                  <div>{{data.recordTimeFormate}}</div>
                </li>
                <li>
                  <span>交易方式</span>
                  <div>{{data.payTypeFormate}}</div>
                </li>
                <li>
                  <span>交易门店</span>
                  <div>{{data.shopName}}</div>
                </li>
                <li>
                  <span>订单编号</span>
                  <div>{{data.orderId}}</div>
                </li>
                <li>
                  <span>交易流水号</span>
                  <div>{{data.bizNo}}</div>
                </li>
                <li v-if="data.recordType==1">
                  <span>第三方交易流水号</span>
                  <div class="info">{{data.thirdTradeNo}}</div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast } from "mint-ui";
import moment from "moment";
export default {
  name: "fxActivityRecordDetails",
  data() {
    return {
      popupVisible: false,
      data: {
        deviceId: null,
        operator: null,
        orderId: null,
        orderSource: null,
        payType: null,
        refundAmount: null,
        shopName: null,
        thirdTradeNo: null,
        recordTime: null,
        recordType: null,//流水类型： 1支付 2退款
        settlementType: null,//结算类型：0-未结算，1-已结算
        settlementTypeFormate: null,
      },
      orderData:{tradeOrderExtModel:null},
    };
  },
  props: {
    param: {
      type: Object
    },
    title: {
      type: String
    }
  },
  methods: {
    orderTypeFormate(orderType) {
      let v = "";
      if (orderType == 3) {
        v = "津贴核销金额";
      } else if (orderType == 8) {
        v = "津贴发放金额";
      } else if (orderType == 7) {
        v = "服务费";
      } else if (orderType == 9) {
        v = "服务费";
      }
      return v;
    },
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    loadData() {
      if (this.param && this.param != {}) {
        this.data = this.param;
        const recordType = this.param.recordType;
        let recordTypeFormate = "";
        if (recordType === 1) {
          recordTypeFormate = "收款";
        } else if (recordType === 2) {
          recordTypeFormate = "退款";
        }
        this.data.recordTypeFormate = recordTypeFormate;

        const payType = this.param.payType;
        let payTypeFormate = "未知";
        //支付方式
        if (payType == 2) {
          payTypeFormate = "支付宝";
        } else if (payType == 5) {
          payTypeFormate = "微信";
        } else if (payType == 7) {
          payTypeFormate = "云闪付";
        } else if (payType == 0) {
          payTypeFormate = "全部";
        }
        this.data.payTypeFormate = payTypeFormate;
        //结算类型
        const settlementType = this.param.settlementType;
        let settlementTypeFormate = "";
        if (settlementType == 0) {
          settlementTypeFormate = "未结算";
        } else if (settlementType == 1) {
          settlementTypeFormate = "已结算";
        }
        this.data.settlementTypeFormate = settlementTypeFormate;

        this.data.recordTimeFormate = CommonUtil.timestampToTime(
          this.param.recordTime
        );
        if (settlementType == 0) {
          this.param.settlementTime = this.param.createTime + 2*24 * 60 * 60 * 1000;
          this.data.settlementTimeFormate = moment(this.param.settlementTime).format("YYYY-MM-DD");
        }else{
          this.data.settlementTimeFormate = CommonUtil.timestampToTime(
            this.param.settlementTime
          );          
        }

        const params = { orderNo: this.param.orderId, recordId: this.param.recordId };
        this.ajax({
          url: `/marketing/record/queryMarketingRecordDetail.do`,
          type: "POST",
          data: params,
          controlLoading: false,
        })
          .then(res => {
            if (res.success && res.resultObject) {
              this.orderData = res.resultObject;
            } else {
              Toast(res.msg);
            }
          })
          .catch(err => {

          });
      } else {
        Toast("未获取到详情数据");
      }
    }
  },

  created() { },
  components: {
    customHeader
  },
  watch: {
    popupVisible(newV, oldV) {
      if (newV) {
        this.loadData();
      }
    }
  }
};
</script>
<style lang='scss' scoped>
@import "fxActivityRecord";
</style>
